<template>
	<div class="container">
		<div class="jx-container">
      <el-form ref="form" :model="params_list" :rules="rules" label-width="130px" class="jx-form">
        <div class="jx-detail">
          <div class="detail-item">
            <div class="item">
              <!-- <el-form-item label="首页轮播设置 ：" prop="name">
                <div class="unit">
                  <div class="item-inline" v-for="(item,index) in params_list.partnerLogos" :key="index">
                    <async-example :item="item"></async-example>
                  </div>
                  <span class="gray">设置APP首页轮播</span>
                </div>
              </el-form-item>
              <el-form-item label="首页类目设置：">
                <span class="tag">4S店保养</span>
                <span class="tag">4S店保养</span>
                <span class="tag">4S店保养</span>
                <span class="tag">4S店保养</span>
                <span class="tag">4S店保养</span>
                <el-button style="margin-right: 10px;" @click="editTag" type="text" size="small">编辑</el-button>
                <span class="gray">显示在首页的类目，最多设置5个</span>
              </el-form-item>
              <el-form-item label="首页活动设置：">
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload1Success">
                      <img v-if="params_list.pic1.img" :src="params_list.pic1.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic1.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic1.link" placeholder="请输入链接"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload2Success">
                      <img v-if="params_list.pic2.img" :src="params_list.pic2.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic2.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic2.link" placeholder="请输入链接"></el-input>
                  </div>
                </div>
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload3Success">
                      <img v-if="params_list.pic3.img" :src="params_list.pic3.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic3.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic3.link" placeholder="请输入链接"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload4Success">
                      <img v-if="params_list.pic4.img" :src="params_list.pic4.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic4.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic4.link" placeholder="请输入链接"></el-input>
                  </div>
                </div>
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload3Success">
                      <img v-if="params_list.pic5.img" :src="params_list.pic5.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic5.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic5.link" placeholder="请输入链接"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload4Success">
                      <img v-if="params_list.pic6.img" :src="params_list.pic6.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic6.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic6.link" placeholder="请输入链接"></el-input>
                  </div>
                </div>
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload3Success">
                      <img v-if="params_list.pic7.img" :src="params_list.pic7.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic7.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic7.link" placeholder="请输入链接"></el-input>
                  </div>
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="pic"
                      :data="upload"
                      :headers="headers"
                      :action="$api.common.upload"
                      :show-file-list="false"
                      :on-success="upload4Success">
                      <img v-if="params_list.pic8.img" :src="params_list.pic8.img" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.pic8.name" placeholder="请输入名称"></el-input>
                    <el-input v-model="params_list.pic8.link" placeholder="请输入链接"></el-input>
                  </div>
                </div>
              </el-form-item> -->
              <el-form-item label="用户打开弹出：">
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="imgFile"
                      :headers="headers"
                      :action="`${$api.common.upload}?catalog=setting_app`"
                      :show-file-list="false"
                      :on-success="uploadSuccess">
                      <img v-if="params_list.consumerOpenImgUrl != ''" :src="params_list.consumerOpenImgUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.consumerOpenUrl" placeholder="请输入链接"></el-input>
                  </div>
                </div>
                <div class="unit">
                  <div class="item-inline time-line">
                    <span>时间</span>
                    <el-date-picker
                      v-model="params_list.consumerOpenBeginDatetime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
                    <span style="margin-left: 10px;">至</span>
                    <el-date-picker
                      v-model="params_list.consumerOpenEndDatetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      type="datetime"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </div>
                </div>
              </el-form-item>
              <el-form-item label="商户打开弹出：">
                <div class="unit">
                  <div class="item-inline">
                    <el-upload
                      class="avatar-uploader jx-uploader"
                      name="imgFile"
                      :headers="headers"
                      :action="`${$api.common.upload}?catalog=setting_app`"
                      :show-file-list="false"
                      :on-success="uploadshSuccess">
                      <img v-if="params_list.businessOpenImgUrl != ''" :src="params_list.businessOpenImgUrl" class="avatar">
                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload> 
                    <el-input v-model="params_list.businessOpenUrl" placeholder="请输入链接"></el-input>
                  </div>
                </div>
                <div class="unit">
                  <div class="item-inline time-line">
                    <span>时间</span>
                    <el-date-picker
                      v-model="params_list.businessOpenBeginDatetime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
                    <span style="margin-left: 10px;">至</span>
                    <el-date-picker
                      v-model="params_list.businessOpenEndDatetime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间">
                    </el-date-picker>
                  </div>
                </div>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.saveing" @click="submitRow('form')">确定</el-button>
      </div>
    </div>
    <!-- 编辑类目 -->
    <el-dialog  :visible.sync="boo.showDialog" class="jx-dialog" width="65%">
      <div slot="title" class="header-title">
        <span class="title-name">编辑类目</span>
      </div>
      <el-form ref="lmform" :model="currentRow" :rules="lmrules" label-width="110px" class="jx-form">
        <div class="jx-detail lm-detail">
          <div class="detail-item">
            <div class="item">
              <el-form-item label="选择类目：" prop="type">
                <el-select v-model="currentRow.type" multiple multiple-limit="5" placeholder="请选择">
                  <el-option
                    v-for="(item,index) in options"
                    :key="index"
                    :label="item.label"
                    :value="item.value">
                    <span style="float: left">
                      <img class="icon" src="/static/img/u178.png"/>
                      {{ item.label }}
                    </span>
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div> 
      </el-form>
      <div class="btn-container">
        <el-button class="jx-btn" type="warning" @click="boo.showDialog = false">取消</el-button>
        <el-button class="jx-btn" type="primary" :loading="boo.lmsaveing" @click="submitRow_lm('lmform')">保存</el-button>
      </div>
    </el-dialog>
	</div>
</template>

<script>
	export default {
    components: {
      'async-example': () => import('./upload/index')
    },
		data() {
			return {
        https: this.$api.setting.app,
        boo: {
          loading: false,
          showDialog: false,
          lmsaveing: false,
          saveing: false,
        },
        headers: {
          'admin-auth-token': localStorage.getItem('ms_token') || ''
        },
        params_list: {},
        rules: {
          item2: [{ required: true, message: '请输入商户户端APP名称', trigger: 'blur' }],
          name: [{ required: true, message: '请输入客户端APP名称', trigger: 'blur' }],
        },
        currentRow: {type: []},
        options: [
          {value: '1',label: '4S点保养1'},
          {value: '2',label: '4S点保养2'},
          {value: '3',label: '4S点保养3'},
          {value: '4',label: '4S点保养4'},
          {value: '5',label: '4S点保养5'},
          {value: '6',label: '4S点保养6'},
          {value: '7',label: '4S点保养7'}
        ],
        lmrules: {
          type: [{ required: true, message: '请选择类目', trigger: 'change' }],
        },
			}
		},
		mounted(){
      let _self = this
      _self.getList()
    },
		methods: {
      getList(){
        let _self = this
        let params = {}
        let success = (res)=>{
          res = res.data
          if(res.retCode == 1){
            _self.params_list = res.retObject
          }else{
            _self.$message.error(res.retMsg)
          }
        }
        _self.$axios.get(_self.https.list, params, success) 
      },
      uploadSuccess(res, file){
        let _self = this
      	if (res.retCode == 1) {
          _self.params_list.consumerOpenImgUrl = res.retObject.defaultImgDetail.path
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      uploadshSuccess(res, file){
        let _self = this
      	if (res.retCode == 1) {
          _self.params_list.businessOpenImgUrl = res.retObject.defaultImgDetail.path
        } else {
          _self.$message.error(res.retMsg)
        }
      },
      editTag(){
        let _self = this
        _self.boo.showDialog = true
      },
      submitRow(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){  
            if(_self.$reg.isDomain(_self.params_list.consumerOpenUrl) == false) return _self.$message.error('请输入正确链接')
            if(_self.$reg.isDomain(_self.params_list.businessOpenUrl) == false) return _self.$message.error('请输入正确链接')
            _self.boo.saveing = true
            let success = (res)=>{
              res = res.data
              if(res.retCode == 1){
                _self.$message.success('APP首页设置成功')
              }else{
                _self.$message.error(res.retMsg)
              }
              _self.boo.saveing = false
            }
            _self.$axios.body(_self.https.add, _self.params_list, success)   
					}else{
						return false
					}
				})
      },
      submitRow_lm(formName){
        let _self = this
				this.$refs[formName].validate((vaild)=>{
					if(vaild){ 
            // console.log(_self.currentRow.type) 
            if(_self.currentRow.type.length != 5){
              _self.$message.error('请选择五个类目')
            }
            // _self.boo.saveing = true
            // let params = {
            // }    
            // let success = (res)=>{
            //   res = res.data
            //   if(res.status == 200){
            //     _self.getList()
            //   }else{
            //     _self.$message.error(res.message)
            //   }
            //   _self.boo.saveing = false
            //   _self.boo.showDialog = false
            // }
            // _self.$axios.post(_self.https.checked, params, success)   
					}else{
						return false
					}
				})
      }
    }
	}

</script>
<style scoped lang="sass">
  .jx-form .el-input--small, .jx-form .el-textarea
    width: 665px
  .gray
    display: inline-block
  .jx-form /deep/ .el-form-item__label
    color: #333
  .unit
    display: flex
    margin-bottom: 20px
    .item-inline
      display: flex
      margin-right: 30px
      height: 100px
      line-height: 100px
      .el-input
        max-width: 200px
        margin-left: 15px
    .time-line
      height: 50px
      line-height: 50px
  .tag
    padding: 3px 15px
    background: #f2f2f2
    margin-right: 10px
  .el-select-dropdown__item
    height: 36px
    line-height: 36px
    .icon
      width: 20px
      position: relative
      top: 2px
</style>
